<template>
  <div class="about">
    <van-tabs v-model="activeName" @click="selectTabs">
      <van-tab title="武器" name="a">
        <WeaponList></WeaponList>
      </van-tab>
      <van-tab title="盔甲" name="b">
        <ArmorList></ArmorList>
      </van-tab>
      <van-tab title="收藏" name="c">
        <Legends></Legends>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import WeaponList from "@/components/weapons/WeaponList.vue";
  import ArmorList from "@/components/armor/ArmorList.vue";
  import Legends from "@/components/legends/Legends.vue";

  export default {
    data() {
      return {
        activeName: "a",
      };
    },
    created() {
      this.activeName = this.$store.state.activeName
    },
    components: {
      WeaponList,
      Legends,
      ArmorList
    },
    methods: {
      selectTabs(name) {
        this.$store.commit('changeActiveName', name)
      },
    }
  };
</script>

<style scoped>
  .about {
    margin-bottom: 50px;
  }
</style>